<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="orders by dede58.com"/>
    <title>知识付费系统 - 首页</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

<div id="app">

    <!-- start header -->
    <header>
        <div class="top center">
            <div class="left fl">
                <ul>
                    <li>
                        <!-- 这里直接去首页 -->
                        <a href="index.html" target="_self">基于Spring Cloud的知识付费系统</a>
                    </li>
                    <div class="clear"></div>
                </ul>
            </div>
            <div class="right fr">
                <div v-if="username.length == 0" style="color: #cccccc">
                    <a href="login.html" style="color: #eeeeee" target="_self">登录</a>
                    &nbsp;&nbsp; | &nbsp;&nbsp;
                    <a href="register.html" style="color: #eeeeee" target="_self">注册</a>
                </div>
                <div v-if="username.length > 0" style="color: #cccccc">
                    <a v-if="userType == 2" href="topicAdmin.html" style="color: #eeeeee">
                        <img v-bind:src="headimg" style="width: 25px;height: 25px;border-radius:50%;">
                        &nbsp;&nbsp;{{username}}
                    </a>
                    <a v-if="userType != 2" href="#" v-on:click="setSelfUserId(loginUserId)" style="color: #eeeeee">
                        <img v-bind:src="headimg" style="width: 25px;height: 25px;border-radius:50%;">
                        &nbsp;&nbsp;{{username}}
                    </a>
                    &nbsp;&nbsp; | &nbsp;&nbsp;
                    <a href="editArticle.html" style="color: #eeeeee" target="_self">立即发帖</a>
                    &nbsp;&nbsp; | &nbsp;&nbsp;
                    <a v-on:click="loginOut" href="#" style="color: #eeeeee">注销</a>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </header>
    <!--end header -->

    <br>
    <br>
    <center>
        <img v-bind:src="kpfUser.headimg" style="width: 80px;height: 80px;border-radius:50%;border: 3px solid burlywood;">
        <br>
        <b>
            <h2><a href="#">{{kpfUser.username}}</a></h2>
        </b>
        <span style="font-size: 16px">{{kpfUser.age}}岁 &nbsp;&nbsp; {{kpfUser.address}}</span>
    </center>
    <a style="margin-left: 15%" href="self.html">我发布的</a> &nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="collect.html">我的收藏</a> &nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="follow.html">我的关注</a> &nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="fans.html"><b>我的粉丝</b></a> &nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="#" data-toggle="modal" data-target="#myModal">修改资料</a>
    <center v-if="fansList != null">
        <table id="showTopic" class="table table-hover" style="width: 70%;margin-top: 15px;">
            <thead>
            <tr>
                <th style="text-align: center" colspan="3">
                    粉丝共 &nbsp;👉 <b>{{fansList.length}}</b> &nbsp; 人
                </th>
            </tr>
            </thead>
            <tbody v-for="(user,index) in fansList">
            <tr class="active">
                <td align="left" width='5%'>
                    <a href="#" v-on:click="setSelfUserId(user.id)">
                        <img v-bind:src="user.headimg" style="width: 80px;height: 80px;border-radius:50%;border: 3px solid burlywood;">
                    </a>
                </td>
                <td align="left" width="90%" style="font-size: 17px;">
                    <a href="#" v-on:click="setSelfUserId(user.id)">
                        {{user.username}}
                    </a>
                    <hr>
                    粉丝 👉 {{user.userFansAndStatusVO.fansNum}}
                </td>
                <!--<td align="left" width="5%" style="font-size: 17px;">-->
                <!--    <a v-if="user.userFansAndStatusVO.followStatus == 0" style="color: ghostwhite" class="btn btn-danger" v-on:click="followUser(user.id)">关注</a>-->
                <!--    <a v-if="user.userFansAndStatusVO.followStatus == 1" style="color: ghostwhite" class="btn btn-info" v-on:click="followUser(user.id)">取消关注</a>-->
                <!--</td>-->
            </tr>
            </tbody>
        </table>
    </center>

    <!-- 模态框（Modal） -->
    <div style="margin-top: 200px" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">
                        <b>修改资料</b>
                    </h4>
                </div>
                <div class="modal-body">
                    <table>
                        <tr>
                            <td>
                                <form>
                                    头像：<input @change="getHeadimg($event)" value="上传" id="uploadHeadimg" type="file" name="upload"><br>
                                </form>
                                手机：<input style="margin-top: 10px" placeholder="手机" name="phone" id="phone" v-model="kpfUser.phone" class="phone" type="text" required><br>
                                姓名：<input style="margin-top: 10px" placeholder="姓名" name="username" id="username" v-model="kpfUser.username" class="username" type="text" required><br>
                                密码：<input style="margin-top: 10px" placeholder="密码" name="password" id="password" v-model="kpfUser.password" class="password" type="password" required><br>
                                地址：<input style="margin-top: 10px" placeholder="地址" name="address" id="address" v-model="kpfUser.address" class="address" type="text" required>
                            </td>
                            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                            <td>
                                <img v-bind:src="kpfUser.headimg" style="width: 150px;height: 150px;border-radius:50%;border: 3px solid burlywood;">
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" v-on:click="modifySelfInfo(kpfUser.username,kpfUser.phone,kpfUser.password,kpfUser.address)" class="btn btn-primary">
                        修改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- end banner_x -->
    <br>
    <br>
    <div style="bottom: 0px;background: #212529;width: 100%;height: 40px;position: fixed"></div>

</div>

<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/self.js"></script>

</body>
</html>